<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.9.0.custom.css" />	<!-- jqueryUI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />							<!-- jqGrid CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/selfTemplate.css" />						<!-- 本專案自行定義 CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.checkboxtree.min.css" />				<!-- CheckBox樹的 CSS -->

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>										<!-- jQuery 核心 -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>											<!-- jqGrid 語系檔 -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>										<!-- jqGrid 核心 -->
<script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->
<script src="js/widgets.js" type="text/javascript"></script>												<!-- 本專案自行定義 JS -->
<script src="js/jquery.checkboxtree.min.js" type="text/javascript"></script>								<!-- CheckBox樹的 JS -->

<title>交付程式</title>

<script type="text/javascript">

function randomSelect(){
	return Math.floor((Math.random()*10)+1);
}

function genOption(tar) {
	var ind = randomSelect();
	for(i=ind;i>0;i--) {
		$("#"+tar).append("<option>"+i+"</option>");
	}
}

$(document).ready(function() {
	 $("#tree1").checkboxTree();
	 
	 genOption("a");
	 genOption("b");
	 genOption("c");
	 genOption("d");
	 genOption("e");
	 genOption("f");
	 genOption("g");
	 genOption("h");
	 
	 $("#grid1").jqGrid({
			url:'QueryHost',
			datatype: "json",
		   	colNames:["<input type='checkbox' onclick='checkBox(event)' />","需求編號", "需求名稱"],
		   	postData: {
				getDataType: function() { return "mapping"; },
			},
		   	colModel:[
				{name:'my_checkbox',index:'my_checkbox', edittype:"checkbox",
				formatter: "checkbox", formatoptions: {disabled:false},width:40,align:"center" },
		   		{name:"hostIP",index:"hostIP", edittype:"text"},
		   		{name:"hostName",index:"hostName"}
		   	],
		   	width:460,
		   	rowNum:4,
		   	pager: "#pager",
			multiselect: false,
			rownumbers: true,
		   	viewrecords: true,	
			caption: "選擇需求"
		});
		jQuery("#grid1").jqGrid("navGrid","#pager1",{add:false,edit:false,del:false});
});
</script>
</head>

<body>

<div id="funcDisplay">
	點選欲交付的程式
</div>
<div>
	<ul id="tree1">
        <li><input type="checkbox"><label>/bms3/gsm/bl1</label>
            <ul>
                <li><input type="checkbox"><label>/gsmsh/bl/month/BL1E00NEW</label>
                    <ul>
                        <li><input type="checkbox"><label>bl1d40.sh&nbsp;<select id="h"></select></label>
                    </ul>
            </ul>
            <ul>
                <li><input type="checkbox"><label>bms3/gsm/bl2</label>
                    <ul>
                        <li><input type="checkbox"><label>BL3350NEW.C&nbsp;<select id="a"></select></label>
                        <li><input type="checkbox"><label>bl3440new.sh&nbsp;<select id="b"></select></label>
                        <li><input type="checkbox"><label> /bms3/gsm/bl3&nbsp;</label>
                            <ul>
                                <li><input type="checkbox"><label>bl3480new.sh&nbsp;<select id="c"></select></label>
                                <li><input type="checkbox"><label>BL3480NEW.C&nbsp;<select id="d"></select></label>
                            </ul>
                        <li><input type="checkbox"><label>BL3750.C&nbsp;<select id="e"></select></label>
                        <li><input type="checkbox"><label>bl2300new(n,c,s).sh&nbsp;<select id="f"></select></label>
                        <li><input type="checkbox"><label>BL2300NEW_92.sh&nbsp;<select id="g"></select></label>
                    </ul>
            </ul>
    </ul>
</div>
<div id="funcDisplay">
	選擇需求
</div>
<br/>
<table id="grid1"></table>
<div id="pager1"></div>
</body>
</html>